//产品图标换颜色
let videoNavContentTxt1 = document.querySelector(".videoNavContent-txt1");
let videoNavContent = document.querySelector(".videoNavContent");
let menuPopupFixed = document.querySelector(".menuPopupFixed");

function mouseOver(x){
    x.style.display = 'block';
}
function mouseOut1(x) {
    x.style.display = 'none';
}

videoNavContentTxt1.onmouseover =function(){
    menuPopupFixed.style.display = "block";
    mouseOver(menuPopupFixed);
}
videoNavContent.onmouseout =function(){
    menuPopupFixed.style.display = "none";
    mouseOut1(menuPopupFixed);
}

// 产品弹窗移入事件
menuPopupFixed.onmouseover = function (){
    menuPopupFixed.style.display = 'block';
}
menuPopupFixed.onmouseout = function (){
    menuPopupFixed.style.display = 'none';
}

//固定栏滚动条事件
let navNext = document.querySelector(".navNext");
let navNextH = navNext.offsetTop;
let navNextPopup = document.querySelector(".navNext-popup");


window.onscroll = function (){
    //获取滚动条的高度
    let scrollH = document.documentElement.scrollTop || document.body.scrollTop;
    //判断
    if (scrollH >= navNextH){
        //给当前导航栏设置固定定位
        navNext.style.position = "fixed";
        navNext.style.top = 0;
        navNextPopup.style.position = "fixed";
        navNextPopup.style.top = '56px';
    }else{
        //恢复成默认的标准文档流  静态定位
        navNext.style.position = "relative";
        navNextPopup.style.top = 'unset';
        navNextPopup.style.position = 'unset';
    }


    //字体动画
    let sectionSlide4 = document.querySelector(".sectionSlide4");
    let sectionSlide4H = sectionSlide4.offsetTop;

    let HD = document.querySelector(".HD");
    let HDH = HD.offsetTop;
    let HDCamera = document.querySelector(".HDCamera");
    let HDCameraH = HDCamera.offsetTop;
    let HDpresent = document.querySelector(".HDpresent");
    let HDpresentH = HDpresent.offsetTop;
    let solution = document.querySelector(".solution");
    let solutionH = solution.offsetTop;
    let doubleScreen = document.querySelector(".doubleScreen");
    let doubleScreenH = doubleScreen.offsetTop;
    let easyOpration = document.querySelector(".easyOpration");
    let easyOprationH = easyOpration.offsetTop;
    let plugAndPlay = document.querySelector(".plug-and-play");
    let plugAndPlayH = plugAndPlay.offsetTop;
    let data = document.querySelector(".data");
    let dataH = data.offsetTop;
    let meeting = document.querySelector(".meeting");
    let meetingH = meeting.offsetTop;
    let easyCoverage = document.querySelector(".easyCoverage");
    let easyCoverageH = easyCoverage.offsetTop;
    let easyConfiguration = document.querySelector(".easyConfiguration");
    let easyConfigurationH = easyConfiguration.offsetTop;
    let fourstepContent = document.querySelectorAll(".fourstep-content");

    let scrollH2 = scrollH + 293;

    function scrollEvent(x,y,z){
        if (scrollH2 >= z){
            document.querySelector(`.${x}`).classList.add("aniTextShow-5");
            document.querySelector(`.${y}`).classList.add("aniTextShow-1");
        }
    }
    function scrollEvent2(x,y){
        document.querySelector(`.${x}`).classList.add("aniTextShow-5");
        document.querySelector(`.${y}`).classList.add("aniTextShow-1");
    }

    if (scrollH2 >= sectionSlide4H ){
        document.querySelector(".sectionSlide4-text").classList.add("aniTextShow-3");
        document.querySelector(".sectionSlide4-div-img").classList.add("aniTextShow-3");
    }

    if (scrollH2 >= HDH ){
        document.querySelector(".HD-text").classList.add("aniTextShow-1");
        document.querySelector(".HD-img").classList.add("aniTextShow-2");
    }
    if(scrollH2 >= HDCameraH){
        document.querySelector(".HDCamera-content-img").classList.add("aniTextShow-4");
    }
    if(scrollH2 >= HDpresentH){
        scrollEvent2("HDpresent-text1","HDpresent-text2");
        document.querySelector(".HDpresent-imgLeft").classList.add("imgLeft-1");
        document.querySelector(".HDpresent-imgRight").classList.add("imgRight-1");
    }
    scrollEvent("solution-text1","solution-text2",solutionH);
    scrollEvent("doubleScreen-text1","doubleScreen-text2",doubleScreenH);
    scrollEvent("easyOpration-text1","easyOpration-text2",easyOprationH);

    if (scrollH >= easyOprationH){
        document.querySelector(".easyOpration-img2").classList.add("showHand-1");
    }
    if (scrollH2 >=  plugAndPlayH ){
        scrollEvent2("plug-and-play-text1","plug-and-play-text2");
        document.querySelector(".plugLeft").classList.add("plugLeft-1");
        document.querySelector(".plugRight").classList.add("plugRight-1");
        document.querySelector(".plugTop").classList.add("plugTop-1");
        document.querySelector(".plugBottom").classList.add("plugBottom-1");
    }
    if (scrollH2 >= dataH ){
        scrollEvent2("data-text1","data-text2");
        document.querySelector(".dataImg-div").classList.add("aniTextShow-6");
    }
    if (scrollH2 >= meetingH ){
        scrollEvent2("meetingText1","meetingText2");
        document.querySelector(".meetingImg").classList.add("showHand-2");
        document.querySelector(".meetingContent").classList.add("showCompare-1");
    }
    scrollEvent("easyCoverage-text1","easyCoverage-text2",easyCoverageH);

    if (scrollH2 >= easyConfigurationH ){
        scrollEvent2("easyConfiguration-content-text1","easyConfiguration-content-text2");
        document.querySelector(".easyConfiguration-content-img").classList.add("aniTextShow-6");
        document.querySelector(".easyConfiguration-content-img-ul").classList.add("aniTextShow-6");
        fourstepContent[0].classList.add("fourstep1");
        fourstepContent[1].classList.add("fourstep2");
        fourstepContent[2].classList.add("fourstep2");
        fourstepContent[3].classList.add("fourstep4");
    }

    //图片丝滑滚动
    let sectionSlide1 = document.querySelector(".sectionSlide1");
    let sectionSlide1H = sectionSlide1.offsetTop;
    let sectionSlide2 = document.querySelector(".sectionSlide2");
    let sectionSlideSons = document.querySelectorAll(".sectionSlide2 img");
    let sectionSlide4Img = document.querySelector(".sectionSlide4-img");

    if (scrollH >= sectionSlide1H && scrollH <= sectionSlide4H){
        sectionSlide2.style.display = "block";
        sectionSlide4.style.background = 'unset';
        sectionSlide4Img.style.opacity = '0';
    }else {
        sectionSlide2.style.display = "none";
        sectionSlide4.style.background = '#0b0c0d';
        sectionSlide4Img.style.opacity = '1';
        // sectionSlide4.className = 'sectionSlide4off';
    }
    let i = Math.ceil((scrollH-sectionSlide1H)/19);
    if(i > 0 && i < sectionSlideSons.length){
        for (let concent of sectionSlideSons){
            // concent.classList.remove("imgshow");
            concent.className = 'sectionSlideSon';
        }
        // sectionSlideSons[i].classList.add("imgshow");
        sectionSlideSons[i].className = 'imgshow';
    }else {
        return ;
    }



}

//播放视频事件
let playerButton = document.querySelector(".playerButton");
let videoPlayeContent = document.querySelector(".videoPlayer-content");
let videoPlayerContentVideo = document.querySelector(".videoPlayer-content-video");
let videoPlayerContentX = document.querySelector(".videoPlayer-content-x");

playerButton.onclick = function (){
    videoPlayeContent.style.visibility = "visible";
    videoPlayerContentVideo.play();
}
videoPlayerContentX.onclick = function (){
    videoPlayeContent.style.visibility = "hidden";
    videoPlayerContentVideo.pause();
}


//固定导航栏弹窗事件
let navNextPopupContent = document.querySelectorAll(".navNext-popup-content ul");

//底部图标变换事件

let footerTwoLeftIcon1 = document.querySelector(".footerTwoLeftIcon1");
let footerTwoLeftIcon2 = document.querySelector(".footerTwoLeftIcon2");
let footerTwoLeftIcon3 = document.querySelector(".footerTwoLeftIcon3");
let footerTwoLeftIcon4 = document.querySelector(".footerTwoLeftIcon4");

let footerRightIcon1 = document.querySelector(".footerRightIcon1");
let footerRightIcon2 = document.querySelector(".footerRightIcon2");

let footerPopup1 = document.querySelector(".footerPopup1");
let footerPopup2 = document.querySelector(".footerPopup2");
let footerPopup3 = document.querySelector(".footerPopup3");

let footerPopup4 = document.querySelector(".footerPopup4");
let footerPopup5 = document.querySelector(".footerPopup5");

//跑马灯
//获取文本颜色    获取原色
function getColor(){
    var r = Math.floor(Math.random()*256);//随机红
    var g = Math.floor(Math.random()*256);//随机绿
    var b = Math.floor(Math.random()*256);//随机蓝
    return "rgb("+ r +"," + g + ","+ b + ")";
}
function randomTxt(text){
    text.style.color = getColor();
}

let cool;

function mouseoverFooterleft(x){
    if (x == 1){
        footerTwoLeftIcon1.className = 'footerTwoLeftIcon1off';
    }else if (x == 2){
        footerTwoLeftIcon2.className = 'footerTwoLeftIcon2off';
        footerPopup1.style.display = 'block';
        cool = setInterval('randomTxt(footerPopup1)',100);

    }else if (x == 3){
        footerTwoLeftIcon3.className = 'footerTwoLeftIcon3off';
        footerPopup2.style.display = 'block';
        cool = setInterval('randomTxt(footerPopup2)',100);
    }else if (x == 4){
        footerTwoLeftIcon4.className = 'footerTwoLeftIcon4off';
        footerPopup3.style.display = 'block';
        cool = setInterval('randomTxt(footerPopup3)',100);
    }
}
function mouseoutFooterleft(x){
    clearInterval(cool);
    if (x == 1){
        footerTwoLeftIcon1.className = 'footerTwoLeftIcon1';
    }else if (x == 2){
        footerTwoLeftIcon2.className = 'footerTwoLeftIcon2';
        footerPopup1.style.display = 'none';
    }else if (x == 3){
        footerTwoLeftIcon3.className = 'footerTwoLeftIcon3';
        footerPopup2.style.display = 'none';
    }else if (x == 4){
        footerTwoLeftIcon4.className = 'footerTwoLeftIcon4';
        footerPopup3.style.display = 'none';
    }
}
function mouseoverFooterRight(x){
    if (x == 5){
        footerRightIcon1.className = 'footerRightIcon1off'
        footerPopup4.style.display = 'block';
    }else if(x == 6){
        footerRightIcon2.className = 'footerRightIcon2off'
        footerPopup5.style.display = 'block';
    }
}
function mouseoutFooterRight(x){
    if (x == 5){
        footerRightIcon1.className = 'footerRightIcon1'
        footerPopup4.style.display = 'none';
    }else if(x == 6){
        footerRightIcon2.className = 'footerRightIcon2'
        footerPopup5.style.display = 'none';
    }
}